<template>
  <div>
    <div class="p wrap">
      <span>
        <span>首页</span>
        <i>/</i>
        <span>个人中心</span>
        <i>/</i>
        <span>个人信息</span>
      </span>
    </div>
    <div class="account wrap">
      <div class="l">
        <div class="l_top">
          <img :src="userInfo.headImg" alt="" width="100px" height="100px" />
        </div>
        <p class="l_name">{{ userInfo.nickName }}</p>
        <h3>交易管理</h3>
        <ul class="l_Ber">
          <li @click="ToShopping">帐号管理</li>
          <li>我的订单</li>
          <li class="active">购物车</li>
          <li>消息通知</li>
          <li>积分明细</li>
          <li>积分攻略</li>
        </ul>
      </div>
      <div class="r">
        <table>
          <tr>
            <th width="50px"><input type="checkbox" v-model="titelAll" /></th>
            <th width="300px">礼品信息</th>
            <th width="144px">兑换分数</th>
            <th width="184px">数量</th>
            <th width="160px">小计 (鸡腿)</th>
            <th width="100px">操作</th>
          </tr>
          <tr v-for="(item, index) in dataAll" :key="item.id">
            <td width="50px">
              <input type="checkbox" v-model="checkoutAll[index]" />
            </td>
            <td width="300px">
              <div class="td2">
                <div class="td_l">
                  <div class="dw">
                    <img
                      :src="imgB + item.coverImg"
                      alt=""
                      width="84px"
                      height="98px"
                    />
                  </div>
                </div>
                <div class="td_r">
                  <h3>{{ item.title }}</h3>
                  <span>{{ item.versionDescription }}</span>
                </div>
              </div>
            </td>
            <td width="144px">
              <p>{{ item.coin }}鸡腿</p>
            </td>
            <td width="184px">
              <div class="btn1">
                <div @click="add(-1,index)">-</div>
                <div class="btn">{{ numAll[index] }}</div>
                <div @click="add(1,index)">+</div>
              </div>
            </td>
            <td width="160px">
              <p>{{ item.coin*numAll[index] }}鸡腿</p>
            </td>
            <td width="100px">
              <div class="dal">删除</div>
            </td>
          </tr>
        </table>
        <h3 class="zung">总计: <i>{{TotalPrice}}鸡腿</i></h3>
        <div class="js">结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { GoCartsAPI } from "../request/api";
export default {
  data() {
    return {
      dataAll: [],
      checkoutAll: [],
      numAll:[]
    };
  },
  async created() {
    let res = await GoCartsAPI();
    if (!res) return;
    console.log(res);
    this.dataAll = res.data;
    this.numAll=res.data.map((item)=>{
      return item.total
    })
    this.checkoutAll = res.data.map(() => false);
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo.userInfo,
    }),
    titelAll: {
      get() {
        return !this.checkoutAll.includes(false);
      },
      set(val) {
        return this.checkoutAll=this.checkoutAll.map(() => val);
      },
    },
    TotalPrice(){
      let ret=this.dataAll.reduce((pre,cur,index)=>{
        return pre+(this.checkoutAll[index]?cur.coin*this.numAll[index]:0)
      },0)
      return ret
    }
  },
  methods: {
    ToShopping() {
      this.$router.push("/user/account");
    },
    add(i,index){
      if(this.numAll[index]>1&&i<0 || i>0){
        let aa = this.numAll[index]+i
        //修改数组里面的方法  this.$set(数组名字,索引,修改声明)
        this.$set(this.numAll,index,aa)
      }
      console.log(this.numAll);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.p {
  padding: 15px 0;
  i {
    margin: 0 10px;
  }
}
.account {
  padding: 28px 0 48px;
  border-top: 1px solid #ccc;
  display: flex;
  .l {
    background-color: rgb(231, 231, 231);
    font-size: 18px;
    width: 200px;
    min-height: 720px;
    margin-right: 60px;
    cursor: pointer;

    /* 个人头像 */
    .l_top {
      text-align: center;
      margin: 30px auto 15px;
    }
    /* 名字 */
    .l_name {
      text-align: center;
      margin-bottom: 40px;
    }
    h3 {
      font-weight: 800;
      color: #000;
      margin-left: 20px;
      padding-bottom: 20px;
    }
    ul {
      margin-left: 20px;
      li {
        margin-bottom: 17px;
      }
    }
  }
}
.active {
  border-left: 2px solid #0a328e;
  padding-left: 10px;
  color: #0a328e;
}
.r {
  flex: 1;
  table {
    width: 100%;
    border: 1px solid #ccc;
    tr {
      th {
        padding-top: 20px;
        padding-bottom: 20px;
        font-weight: 700;
        text-align: center;
        background-color: rgb(228, 228, 228);
      }
      td {
        height: 140px;
        text-align: center;
        overflow: hidden;
        vertical-align: middle;
        .dal {
          width: 58px;
          height: 38px;
          border: 1px solid #ccc;
          border-radius: 2px;
          line-height: 38px;
          margin-left: 21px;
        }

        .btn1 {
          display: flex;
          justify-content: center;
          div {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            line-height: 30px;
          }
          .btn {
            width: 45px;
          }
        }

        .td2 {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .dw {
            width: 90px;
            height: 90px;
          }
          .td_r {
            flex: 1;
            line-height: 60px;
            padding-left: 5px;
            h3 {
              line-height: 30px;
              margin-bottom: 18px;
              font-size: 18px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            span {
              line-height: 30px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
.zung {
  font-size: 20px;
  margin: 20px 0;
  text-align: right;
  i {
    color: #f40;
  }
}
.js {
  width: 100px;
  height: 35px;
  background-color: #0a328e;
  color: #fff;
  line-height: 35px;
  text-align: center;
  float: right;
}
</style>